<template>
  <div class="home">
    <div class="home-container">
      <img src="@/assets/image/demo.jpg" alt="" />
      <!-- 导航栏 -->
      <Nav v-if="navList.length" :list="navList" @handleClick="gotoPath"></Nav>
      <router-view />
      <!-- <template v-if="websiteData.length > 0">
        <WebsiteCard :websiteData="websiteData" />
      </template>
      <SentenceCard /> -->
      <!-- <HH /> -->

      <!-- 准备舍弃 -->
      <!-- <CanvasHouse></CanvasHouse> -->
    </div>
    <Sidebarl></Sidebarl>
    <Ripple />
  </div>
</template>

<script lang="ts">
import { getCurrentInstance, reactive, onMounted } from 'vue'
import Sidebarl from '@/components/sidebarl.vue' // @ is an alias to /src
import Nav from '@/components/nav/nav.vue'
import WebsiteCard from '@/components/cards/website.vue'
import SentenceCard from '@/components/cards/sentence.vue'
import CanvasHouse from '@/components/canvas/house/index.vue'
import Ripple from '@/components/common/ripple.vue'

import router from '@/router/router'

// import HH from "@/components/card/hh.vue";

import { getWebsite, download } from '@/server/home'
import { login } from '@/server/home'
export default {
  name: 'Home',
  components: {
    Sidebarl,
    Nav,
    WebsiteCard,
    SentenceCard,
    CanvasHouse,
    Ripple
  },
  // data() {
  //   return {
  //     websiteData: [],
  //     data: {},
  //     list: [1, 2, 3],
  //   };
  // },
  // methods: {
  //   async getWebsiteData() {
  //     const res = await getWebsite({});
  //     this.websiteData = res?.data?.data;
  //   },
  // },
  async setup() {
    const res = await download({})
    console.log(61, res)

    onMounted(() => {
      let x = '0'
      console.log('70' == x)
      console.log(666)
    })
    let navList = reactive([])
    const ctx = getCurrentInstance()
    const { data }: any = await login({ token: 111 })
    const { nav, articleList } = data
    navList = nav

    // console.log(71, navList);
    function gotoPath(pathName) {
      router.push('/home/' + pathName)
    }
    return { navList, articleList, gotoPath }
    // login({}).then((response) => {
    //   const res: any = response.data;
    //   console.log(res);
    // });
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  // background: rgb(246, 246, 246);
  &-container {
    background: #ffffff;
    padding: 0 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50px;
    margin: auto;
    border-radius: 10px;
    width: 60%;
    padding-top: 58px;
  }
}
</style>
